<!--
 * @Author: your name
 * @Date: 2021-03-12 10:07:32
 * @LastEditTime: 2021-05-17 09:49:36
 * @LastEditors: qinglong
 * @Description: In User Settings Edit
 * @FilePath: \systemCenter\src\views\ftpManage\pricingManage\pricingTask\curveDataAffirm_index.vue
-->
<template>
  <!-- 确认曲线页面 -->
  <div class="curveDataAffirm">
    <el-form :model="searchForm" ref="searchRef" label-width="160px" label-position="right">
      <el-row>
        <el-col :span="8">
          <el-form-item label="曲线：" prop="curveDef">
            <el-input
              v-model.trim="searchForm.curveName"
              maxlength="40"
              @input="searchElementField"
            ></el-input>
            <el-popover
              ref="popoverElement"
              placement="bottom-end"
              width="300"
              v-model="curveDefContent" 
            >
              <el-table
                ref="multipleElementFieldTable"
                :data="tableCurveDefData"
                height="200"
                style="width: 100%; height:200px"
                @row-click="authorizecurveDefFor"
              >
                <el-table-column prop="curveCode" label="曲线编号" :show-overflow-tooltip="true"></el-table-column>
                <el-table-column prop="curveName" label="曲线名称" :show-overflow-tooltip="true"></el-table-column>
              </el-table>
            </el-popover>
            <!-- <div  v-popover:popoverElement class="selectBox" @click="selectElementField"></div> -->
            <div v-popover:popoverElement class="selectBox"></div>
          </el-form-item>
        </el-col>
        <el-col :span="8" >
          <el-form-item label="数据日期: " prop="dataDate">
            <el-date-picker
              v-model="searchForm.dataDate"
              type="date"
              style="width:100%;"
              value-format="yyyy-MM-dd"
              placeholder
            ></el-date-picker>
          </el-form-item>
        </el-col>
         <el-col :span="8" >
          <el-form-item label="曲线是否确认: " prop="affirmFlag">
            <el-select v-model="searchForm.affirmFlag" placeholder="请选择">
              <el-option  label="未确认" value="0"></el-option>
            <el-option  label="已确认" value="1"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="18" align="center">
          <el-button @click="searchFunc()">查询</el-button>
          <el-button @click="reset()">重置</el-button>
        </el-col>
      </el-row>
    </el-form>
    <el-row>
      <el-col :span="18" style="padding-bottom:10px">
        <el-button @click="makeSure()">确认</el-button>
        <el-button @click="makeAllSure()">全部确认</el-button>
      </el-col>
    </el-row>
    <el-table
      ref="multipleModelTable"
      :data="tableModelData"
      style="width: 100%"
      @row-click="authorizeModelFor"
    >
      <el-table-column width="55" type="selection"></el-table-column>
      <el-table-column prop="curveCode" label="曲线编号" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="curveName" label="曲线名称" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="dataDate" label="数据日期" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="curveType" label="曲线类型" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="affirmDate" label="确认日期" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column
        v-for="(item,key) in tableList"
        align="center"
        :key="key"
        :label="item.name"
        :prop="item.code"
        :show-overflow-tooltip="true"
      ></el-table-column>
      <el-table-column prop="creator" label="创建人" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="createdTm" label="创建时间" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="modifier" label="修改人" :show-overflow-tooltip="true"></el-table-column>
      <el-table-column prop="modifiedTm" label="修改时间" :show-overflow-tooltip="true"></el-table-column>
    </el-table>
    <pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchForm.page"
      @refresh="searchFunc"
      :page-size="searchForm.size"
      :total="total"
    ></pagination>
  </div>
</template>

<script>
import { publicManage_pub } from "@/api/index";
export default {
  data() {
    return {
     total:0,
      tableModelData: [],
      searchForm: {
          curveCode:'',
          dataDate:'',
          affirmFlag:'',
          page:1,
          size:15
      },
      //悬浮框
      curveDefContent: false,
      tableCurveDefData: [
        {
          curveCode: "1",
          curveName: "1"
        }
      ],
      tablecurveBaseData:[],
      tableList: []
    };
  },
  watch: {},
  components: {},
  created() {
    this.init();
    this.searchFunc();
  },
  computed: {},
  mounted() {},
  methods: {
    init() {
      //获取所有曲线数据
      publicManage_pub.findCurveDefMap().then(res => {
        if ((res.code = 200)) {
          let keys = Object.keys(res.datas);
          let curves = [];
          for (let i = 0; i < keys.length; i++) {
            let data = {
              curveCode: res.datas[keys[i]],
              curveName: keys[i]
            };
            curves.push(data);
          }
          this.tablecurveBaseData = this.$clone(curves);
          this.tableCurveDefData = this.$clone(curves);
        } else {
          this.$message.error(res.message);
        }
      });

      //首次获取展示字段
    //   let data = this.searchForm;
    //   publicManage_pub.queryAllTermValues(data).then(res => {
    //     if ((res.code = 200)) {
    //       this.tableList = res.data;
    //     }
    //   });
    },
    searchFunc() {
      let data ={
          curveCode:this.searchForm.curveCode,
          dataDate: this.searchForm.dataDate,
          affirmFlag:this.searchForm.affirmFlag
      }
      publicManage_pub.queryAllTermValues(data).then(res => {
        if ((res.code = 200)) {
          this.tableList = res.data;
          let arrTitlesList = res.data.map(v => {
            return v.code;
          });
          //查询获取的数据
          let params = this.$clone( this.searchForm);
          params.arrTitlesList = arrTitlesList;
          publicManage_pub.findAll(params).then(resp => {
            if ((resp.code = 200)) {
              this.tableModelData = resp.data;
              this.total = resp.count;
            }else{
                this.$message.error("数据查询失败");
            }
          });
        }else{
             this.$message.error(res.message);
        }
      });
    },
    reset() {},
    makeSure() {
       let selections =  this.$refs.multipleModelTable.selection;
        if(selections.length<1){
            return this.$message.warning("请选择数据进行操作!!");
        }
      let idList =  selections.map(v=>{
           return v.curveId;
       })
       let params = {
           affirmFlag: "1",
	      ids: idList
       } 
       publicManage_pub.curveDataChangeCurveStatus(params).then(res=>{
            if(res.code=200){
            this.$message.success("曲线确认成功"); 
            }else{
               this.$message.error(res.message); 
            }
       })
        
    },
    makeAllSure() {
           publicManage_pub.affirmFlagAllToAffirm().then(res=>{
                 if(res.code=200){
            this.$message.success(res.message); 
            }else{
               this.$message.error(res.message); 
            }
           })

    },
    //点击行选中
    authorizeModelFor(row) {
      if (this.$refs.multipleModelTable) {
        this.$refs.multipleModelTable.clearSelection();
      }
      this.$refs.multipleModelTable.toggleRowSelection(row, true);
    },

    searchElementField(search) {
            let curveList=[];
            this.tablecurveBaseData.filter(item=>{
              if(item.curveCode.toLowerCase().indexOf(search.toLowerCase()) != -1||item.curveName.toLowerCase().indexOf(search.toLowerCase()) != -1) {
                curveList.push(item);
              }
            });
            this.tableCurveDefData = curveList;
      if (!this.curveDefContent) {
        this.curveDefContent = true;
      }
    },
    authorizecurveDefFor(row) {
      this.searchForm.curveCode = row.curveCode;
      this.searchForm.curveName = row.curveName;
      this.curveDefContent = false;
    },
    handleSizeChange(val){
        this.searchForm.size = val;
        this.searchFunc();
    },
    handleCurrentChange(val){
        this.searchForm.page=val;
       this.searchFunc();
    },
    reset(){
        this.searchForm.curveCode='';
         this.searchForm.curveName='';
         this.searchForm.dataDate='';
         this.searchForm.affirmFlag='';
         this.$forceUpdate();
    },
  }
};
</script>
<style lang="scss" scoped>
.dialogSearchBox {
  header {
    text-align: center;
    span {
      margin: 0 20px;
    }
  }
}
.el-popover {
  max-height: 160px;
  overflow: auto;
}
.selectBox {
  background: url("~@/assets/images/select_btn.gif");
  background-repeat: no-repeat;
  height: 26px;
  width: 50px;
  position: absolute;
  right: 0;
  top: 5px;
  cursor: pointer;
}
</style>

